<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="#">WMS</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Task</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a ui-sref="wms.task.receiptTask.list">Replenishment Task</a>
        </li>
    </ul>
</div>
<div class="container-fluid" style="margin-top:15px">
    <div class="row">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <span class="caption-subject bold"> Replenishment Task: {{task.id}}</span>
                </div>

                <div class="actions" permission-check="{{'task::replenishmentTask_write'}}">
                    <button type="button" style="height: 36px;" class="btn blue" ng-click="editTask()">Edit Replenishment Task</button>
                </div>
                <div class="actions" style="margin-right: 15px;" >
                    <waitting-btn type="button" btn-class="btn blue" ng-click="export()"
                                  value="'Export'" is-loading="exporting"></waitting-btn>
                </div>
            </div>
            <div class="portlet-body form form-horizontal">
                <div class="row form-group">
                    <div class="col-md-3"><b>Status</b>: {{task.status}}</div>
                    <div class="col-md-3"><b>Assignee</b>: {{task.assignee.firstName}} {{task.assignee.lastName}}</div>
                    <div class="col-md-3"><b>Priority</b>: {{task.priority}}</div>
                </div>
                <div style="padding: 15px 10px 5px 15px; background-color: #d5eae4; margin-bottom: 15px;" ng-show="task.replenishmentItems.length>0">
                    <div class="row form-group" ng-repeat="replenishmentItem in task.replenishmentItems">
                        <div class="col-md-3"><b>Item</b>:
                            <item-display item="replenishmentItem"></item-display>
                        </div>
                        <div class="col-md-3"><b>QTY</b>: {{replenishmentItem.qty}}</div>
                        <div class="col-md-3"><b>Unit</b>: {{replenishmentItem.unitName}}</div>
                        <div class="col-md-3"><b>To Location</b>: {{replenishmentItem.toLocationName}}</div>
                        <div class="col-md-6">
                            <label class="bold">SN:</label>
                            <label><span ng-repeat="sn in replenishmentItem.snList">{{sn}}&nbsp;</span></label>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-md-3">
                        <b>Start Time:</b>
                        <span>{{task.startTime}}</span>
                    </div>
                    <div class="col-md-3">
                        <b>End Time:</b>
                        <span>{{task.endTime}}</span>
                    </div>
            <span class="col-md-3"><b>Created Time: </b>{{task.createdWhen | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
                &nbsp;<span ng-show="task.createdBy">({{task.createdBy}})</span></span>
            <span class="col-md-3"><b>Updated Time: </b>{{task.updatedWhen | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
                &nbsp;<span ng-show="task.updatedBy">({{task.updatedBy}})</span></span>
                </div>
                <div class="row form-group">
                    <div class="col-md-12"><b>product</b>:
                        <span ng-repeat="property in task.product.diverseProperties">
                            {{property.name}}: {{property.value}}{{property.unit}}&nbsp;
                        </span>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12"><b>SN</b>:
                    <span ng-repeat="sn in task.snList">{{sn}}&nbsp;</span></div>
                </div>
                <div class="form-group">
                    <span class="col-md-12">
                        <b>Description:</b> {{task.description}}
                    </span>
                </div>
                <div class="row form-group" style="margin-bottom: 30px;">
                    <div class="col-md-12"><b>Force Close Reason</b>: {{task.forceCloseReason}}</div>
                </div>
                <div class="panel panel-default"  ng-repeat="step in task.steps">
                    <div class="panel-heading">
                        <div class="panel-title"  style="display: block; float: left;line-height:34px;"> STEP | {{step.name}}</div>
                        <div class="actions" style="text-align: right;">
                            <button type="button" class="btn yellow" permission-check="{{'task::replenishmentTask_write'}}" update-step-assignees task-step="step">Edit Assignees</button>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="tabbable-custom" style="margin-bottom: 0px; overflow: visible">
                            <ul class="nav nav-tabs">
                                <li ng-class="{'active':activeTabs[step.id] == 'content'}">
                                    <a data-toggle="tab" ng-click="changeTab('content', step.id)"> Content </a>
                                </li>
                                <li ng-class="{'active':activeTabs[step.id] == 'stepException'}">
                                    <a data-toggle="tab" ng-click="changeTab('stepException', step.id)"> Exception </a>
                                </li>
                            </ul>
                            <div class="tab-content" style="padding:15px;">
                                <div ng-class="{'active':activeTabs[step.id] == 'content'}" class="tab-pane ">
                                    <div ng-if="step.name == 'Replenishment'" ng-include="'wms/task/replenishment-task/template/replenishmentStep.html'"></div>
                                    <div ng-if="!step.name == 'Replenishment'" ng-include="'wms/task/common/template/genericStep.html'"></div>
                                </div>
                                <div ng-class="{'active':activeTabs[step.id] == 'stepException'}" class="tab-pane ">
                                    <div class="row form-group" ng-include="'wms/task/common/template/stepException.html'"
                                         ng-repeat="exception in execptionGroupByStepId[step.stepId]">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
